<template>
  <div style="background: rgb(244,244,244);">
    <div style="background:white;width: 90%;height: 90px;border-radius: 10px;margin-left: 70px;margin-top: 40px;font-size: 30px;color: rgb(0,112,192);text-align: center;line-height: 90px">
      面试安排流
    </div>
    <div style="background: white;width: 90%;border-radius: 10px;margin-left: 70px;margin-top: 20px;">
      <div style="border-bottom:1px solid rgb(230,233,243);height: 50px;line-height: 50px;font-size: 14px">
        <span style="margin-left: 80px">面试通知信息</span>
      </div>
      <div>
        <el-form label-width="170px" :rules="bookRule" :model="formInline" ref="postForm" style="margin-top: 20px;padding-bottom:20px">
          <el-form-item>
            <el-col :span="2" >面试负责人：</el-col>
            <el-col :span="6">
              <el-input v-model="formInline.interviewPerson" readonly  style="width: 100%" @click="onSearch2">
                <template #suffix>
                  <!--   vue3图标使用方式  -->
                  <el-icon class="el-input__icon">
                    <component :is="Search" class="enter-sj" @click="onSearch2"></component>
                  </el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="2" :offset="4" >应聘岗位：</el-col>
            <el-col :span="6">
              <el-input v-model="formInline.jobdemandName" readonly  style="width: 100%">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="2" prop="arrangedate">申请面试：</el-col>
            <el-col :span="6">
              <el-date-picker
                  v-model="formInline.interviewDate"
                  prop="interviewDate"
                  type="datetime"
                  placeholder="面试日期"
                  style="width: 100%"
                  :disabled-date="agoDate"
              />
            </el-col>
            <el-col :span="2" :offset="4" prop="arrangetime">安排面试：</el-col>
            <el-col :span="6">
              <el-date-picker
                  v-model="formInline.interviewApdate"
                  prop="interviewApdate"
                  type="datetime"
                  placeholder="面试日期"
                  style="width: 100%"
                  :disabled-date="agoDate"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="2" >面试形式：</el-col>
            <el-col :span="6">
              <el-input v-model="formInline.xingshi" readonly  style="width: 100%"></el-input>
            </el-col>
            <el-col :span="2" :offset="4">面试阶段：</el-col>
            <el-col :span="6">
              <el-input  readonly v-model="formInline.interviewNumber"   style="width: 100%" >
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="background: white;width: 90%;border-radius: 10px;margin-left: 70px;margin-top: 20px;">
      <div style="border-bottom:1px solid rgb(230,233,243);height: 50px;line-height: 50px;font-size: 14px">
        <span style="margin-left: 80px">候选人信息</span>
      </div>
      <div>
        <el-form label-width="170px" :model="formInline"  style="margin-top: 20px;padding-bottom:20px">
          <el-form-item>
            <el-col :span="2" >候选人姓名：</el-col>
            <el-col :span="6">
              <el-input v-model="formInline.interviName" readonly  style="width: 100%" @click="onSearch">
                <template #suffix>
                  <!--   vue3图标使用方式  -->
                  <el-icon class="el-input__icon">
                    <component :is="Search" class="enter-sj" @click="onSearch"></component>
                  </el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="2" :offset="4" >性别：</el-col>
            <el-col :span="6">
              <el-input v-model="formInline.resumeSex" readonly  style="width: 100%">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="2" >手机号码：</el-col>
            <el-col :span="6">
              <el-input v-model="formInline.interviPhone" readonly  style="width: 100%"></el-input>
            </el-col>
            <el-col :span="2" :offset="4" >工作经验：</el-col>
            <el-col :span="6">
              <el-input v-model="formInline.resumeWorkdate" readonly style="width: 100%">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <el-button type="primary" style="margin-left: 550px" @click="onSubmit(postForm)">提交</el-button>
      </div>
    </div>
  </div>
  <el-dialog v-model="d.faromater">
    <div>
          <el-input style="width:200px;margin-left: 450px" v-model="souForm.interviName"/><el-button @click="sousuo()">搜索</el-button>
    </div>
    <div>
      <el-table :data="d.tableData" height="250" style="width: 100%" @row-click="rowClick">
        <el-table-column prop="interviName" label="姓名" width="180" />
        <el-table-column prop="interviPhone" label="电话号码" width="180" />
        <el-table-column prop="jobdemandName" label="岗位匹配" />
      </el-table>
    </div>
    <div>
      <el-button @click="d.faromater=false" style="margin-left: 650px">取消</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="d.faromater2">
<!--    <div>-->
<!--      <el-input style="width:200px;margin-left: 450px" /><el-button>搜索</el-button>-->
<!--    </div>-->
    <div>
      <el-table :data="d.table2Data" height="250" style="width: 100%" @row-click="rowClick2">
        <el-table-column  align='center' prop="recordName" label="员工姓名" width="180" />
      </el-table>
    </div>
    <div>
      <el-button @click="d.faromater2=false" style="margin-left: 650px">取消</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, onBeforeMount, ref} from 'vue'
import axios from "axios";
import {useRouter} from "vue-router";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import router from "../../router";
import { Search } from '@element-plus/icons-vue'
const formInline = reactive({
  interviewId:'',
  interviewPerson: '',
  jobdemandName: '',
  interviewDate:'',
  interviewApdate:'',
  xingshi:'现场面试',
  interviewNumber:2,
  interviewState:0,
  interviewResul:3,
  interviName:'',
  resumeSex:'',
  interviPhone:'',
  resumeWorkdate:'',
})
const d = reactive({
  faromater:false,
  faromater2:false,
  //查询到的面试人信息
  tableData:[],
//查询到的面试负责人信息
  table2Data:[],
})
//不给予选择今天前的日期
const agoDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7;
}
//查询面试人
const onSearch = () => {
  d.faromater=true
  axios.post("http://localhost:9884/Interviews/selectViFushi").then((res)=>{
    d.tableData=res.data.data
  })
}
//查询面试负责人
const onSearch2 = () => {
  d.faromater2=true
  axios.get("http://localhost:1688/recordDubbo/publicRecordDubbo").then((res)=>{
    d.table2Data=res.data.data
    console.log(d.table2Data)
  })
}
//面试人搜索表单
const souForm=reactive({
  interviName:'',
})
//搜索面试人
const sousuo = () => {
  axios.post("http://localhost:9884/Interviews/selsectInterViNumber/"+souForm.interviName).then((res)=>{
    d.tableData=res.data.data
  })
  console.log(souForm)
}
//将面试人信息填入表单
const rowClick = (val) => {
  axios.post("http://localhost:9884/resume/selectPhone/"+val.interviPhone)
      .then((res)=>{
  formInline.resumeSex=res.data.data[0].resumeSex;
  formInline.resumeWorkdate=res.data.data[0].resumeWorkdate;
      })
  formInline.jobdemandName=val.jobdemandName;
  formInline.interviName=val.interviName;
  formInline.interviPhone=val.interviPhone;
  formInline.interviewId=val.interviewId
  d. faromater=false;
  console.log(formInline.interviewId)
}
//将面试负责人加入表单
const rowClick2 = (val) => {
  formInline.interviewPerson=val.recordName;
  d. faromater2=false;
  console.log(formInline.interviewPerson)
}
//定义表单组件
const postForm = ref<FormInstance>();
//表单校验
const bookRule = reactive<FormRules>({
  interviewDate:[
    {required:true,message:'请输入申请日期',trigger:['blur','change']},
  ],
  interviewApdate:[
    {required:true,message:'请输入安排日期',trigger:['blur','change']},
  ]
})
const onSubmit = async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {    //校验通过
      axios.post("http://localhost:9884/Interviews/selectInterViReselt/"+formInline.interviewId)
          .then((res)=>{
            if ( res.data.data.length>0){
              router.push({path: '/interview'})
              ElMessage.error('请勿重复提交申请');
            }else {
              axios.post("http://localhost:9884/Interviews/addintercview",formInline)
                  .then((res)=>{
                    router.push({path: '/interview'})
                    ElMessage({
                      message: '复试申请成功',
                      type: 'success',
                    })
                  })
            }
          })
    } else {
      ElMessage.error('复试申请失败');
    }
  })
}
</script>

<style scoped>

</style>